<template>
  <div class="poatcss-test-event">
    <h1>{{ message }}</h1>
    <section>
        <h2>一、什么是postcss</h2>
        <p>和less、sass、scss一样都是对css进行处理的工具，不同点在于前三个是针对自己的语法生成语法树，再根据自己的既定规则转换成css，而postcss
            是对css进行操作，将css转化成AST树，对AST树进行操作，再生成css，和webpack一样是一个小的平台，没有插件和配置的话话原封不动输出输入的css文件，
            需要根据自身需求安装不同的处理文件后者编写自己的转换规则，不同于webpack或者gulp插件的地方在于，不需要我们自己吧输入的文件转化成AST树。
        </p>
    </section>
    <section>
        <h2>二、配置</h2>
        <code>
            <pre>
    ...
    module:{
        rules:[
            {
                test: /\.less$/,
                use: [
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    'autoprefixer', // install 别人的插件
                                    require('./postcss-diy.js')({test:123}) // 引入自定义的插件
                                ]
                            }
                        }
                    },
                    {
                        loader: "less-loader"
                    }
                ]
            }
        ]
    },
    ...
            </pre>
        </code>
    </section>
    <section>
        <h2>做一个自己的插件</h2>
        <code>
            <pre>
    var postcss = require('postcss');
    // 引入一些自己需要的依赖
    module.exports = postcss.plugin('postcss-diy', function(opts) {
        // 做一些处理参数的事情
        return function(root) {
            // root css AST 树
            // root.nodes rule 的数组
            // rule 是一个class
            root.walkRules(function(rule) {
                // rule 是一个class  例：.abc{color:red}
                // rule.nodes 是class 内的属性组数组 例；color:red;font-size:12px;
                rule.walkDecls(function(decl) {
                    // console.error('decl', decl);
                    // decl 是一个 key:value   例：color:red;
                    if (decl.prop == 'color'){
                        decl.prop = 'background-color';
                    }
                    if (decl.prop == 'overflow' && decl.value == 'scroll') {
                        rule.append({
                            prop: '-webkit-overflow-scrolling',
                            value: 'touch'
                        });
                    }
                });
            });
        };
    });
            </pre>
        </code>
        <p>postcss给提供了一些方法，方便我们对ast树进行操作<a href="https://postcss.org/api/">https://postcss.org/api/</a></p>
        <p>
            例如插入一条规则直接用 rule.append({prop: '-webkit-overflow-scrolling',value: 'touch'})、筛选某条规则的时候也可以用rule.walkDecls('overflow', function(){})来代替在函数内的if (decl.prop == 'overflow'）判断等。
        </p>
    </section>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    @Component({
        // 所有的组件选项都可以放在这里
    })
    export default class poatcss extends Vue {
        // data 在这
        message: string = 'postcss'
    }
</script>
<style lang="scss">
.poatcss-test-event{
}
</style>